<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>购物车</title>
    <link rel="stylesheet" href="./cart.css" />
  </head>
  <body>
    <div class="header" style="background-image: url(./imgs/photo_1.jpg);"></div>
    <div class="content">
      <!-- 依靠 JS 渲染 -->
      
    </div>
    <div class="footer" style="background-image: url(./imgs/photo_4.jpg);"></div>
    <script src="./data.js"></script>
    <script src="./cart.js"></script>
  </body>
</html>

<!-- 
  网页内渲染例子
  <div class="top">
  <input type="checkbox"> 全选
</div>

<ul class="center">
  <li>
    <div class="select">
      <input type="checkbox">
    </div>
    <div class="pic">
      <img src="" alt="">
    </div>
    <div class="name">
      asdhgfasghdfg
    </div>
    <div class="price">
      ￥ <span>100.00</span>
    </div>
    <div class="number">
      <button>-</button>
      <input type="text" value="1">
      <button>+</button>
    </div>
    <div class="subtotal">
      ￥ <span>100.00</span>
    </div>
    <div class="del">
      <button>删除</button>
    </div>
  </li>
</ul>

<div class="bottom">
  <p>总购买数量: 3</p>
  <p>
    <button class="pay">去结算</button>
    <button class="clear">清空购物车</button>
    <button class="clear_select">删除所有已选中</button>
    <button class="list">返回列表页</button>
  </p>
  <p>总价格 : ￥ <span>100.00</span></p>
</div>
 -->
  



